<template>
  <div class="slider-container" :style="{ width: dataStore.isCollapse ? '64px' : '210px' }">
    <div v-if="dataStore.toggleStore" class="logo">{{ dataStore.isCollapse ? '系统' : "智能化营养管理系统" }}</div>
    <el-menu
        active-text-color="#ffd04b"
        background-color="#2f4050"
        text-color="#ffffff"
        router
        :default-active="1"
        :collapse="dataStore.isCollapse"
    >
      <el-menu-item index="/home/index">
        <span>首页</span>
      </el-menu-item>

      <el-sub-menu index="1">
        <template #title>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/sys/admin">
          <span>用户</span>
        </el-menu-item>
        <el-menu-item index="/sys/role">
          <span>角色</span>
        </el-menu-item>
        <el-menu-item index="/sys/permission">
          <span>权限</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <span>用户管理</span>
        </template>
      <el-menu-item index="/user/user">
        <span>用户</span>
      </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>
          <span>临床营养管理</span>
        </template>
        <el-menu-item index="/patient/patient">
          <span>患者</span>
        </el-menu-item>
        <el-menu-item index="/patient/wardRoundRecord">
          <span>查房</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>
          <span>营养仓库管理</span>
        </template>
        <el-menu-item index="/repository/nutritionProduct">
          <span>营养产品</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>
          <span>营养财务管理</span>
        </template>
        <el-menu-item index="/cost/cost">
          <span>费用</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="5">
        <template #title>
          <span>营养订餐管理</span>
        </template>
        <el-menu-item index="/meal/meal">
          <span>餐食</span>
        </el-menu-item>
        <el-menu-item index="/meal/mealRecord">
          <span>订餐记录</span>
        </el-menu-item>
      </el-sub-menu>



    </el-menu>
  </div>
</template>
<script setup>

import {ref} from 'vue';
import {useDataStore} from "@/stores/dataStore"

const dataStore = useDataStore()
//当前选中的路由
const active = ref("/")
if (localStorage.getItem("active")) {
  active.value = localStorage.getItem("active")
}
</script>
<style scoped lang="scss">
.slider-container {
  background-color: #2f4050;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  transition: 0.3s ease-in;

  .logo {
    background-color: #357ca5;
    width: 100%;
    height: 50px;
    line-height: 48px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
  }

}


</style>
